<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">
          编辑
        </h2>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="row g-0">
        <div class="col d-flex flex-column">
          <div class="card-body">
            <!-- 帖子Id -->
            <input type="text" id="edit_article_id" style="display: none;">
            <!-- 版块 -->
            <div class="row align-items-center">
              <div class="col-2">
                <h2 class="mb-4">版块</h2>
              </div>
              <div class="col-10">
                <h2 class="mb-4" id="edit_article_board_name"></h2>
              </div>
            </div>

            <!-- 标题 -->
            <div class="row">
              
              <div class="col-2">
                <h2 class="mb-4">标题</h2>
              </div>
              <div class="col-10">
                <!-- <h2 class="mb-4" id="edit_article_title"></h2> -->
                <input id="edit_article_title" type="text" class="form-control" placeholder="请输入标题">
              </div>
            </div>

            <!-- 内容 -->
            <div class="row">
              <div class="col-2">
                <h2 class="mb-4">内容</h2>
              </div>
              <div class="col-10" style="height: 680px;">
                <div id="edit_article_content_area">
                  <!-- textarea也是一个表单控件，当在editor.md中编辑好的内容会关联这个文本域上 -->
                  <textarea id="edit_article_content" style="display: none;"></textarea>
                </div>
              </div>
            </div>
          </div>

          <div class="card-footer bg-transparent mt-auto">
            <!-- 操作区 结束 -->
            <div class="col-auto row g-2 justify-content-end">
              <div class="col-auto">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-tabler w-100" id="edit_article_submit">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                      <path d="M16 5l3 3"></path>
                    </svg>
                    <span>提交</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入自定义编辑器配置 -->
<script src="./js/image-helper.js"></script>
<script src="./js/editor-config.js"></script>

<script>
  $(function () {
    // 添加Loading提示
    var $loadingMask = $('<div class="loading-mask" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:9999;display:flex;justify-content:center;align-items:center;"><div style="background-color:white;padding:20px;border-radius:5px;">图片上传中，请稍候...</div></div>');
    $('body').append($loadingMask);
    
    // 显示/隐藏Loading函数
    function showLoading() {
      $loadingMask.show();
    }
    
    function hideLoading() {
      $loadingMask.hide();
    }
    
    // ========================== 获取帖子详情 ========================== 
    // 成功后，设置ID,版块名，标题，并初始编辑区同时设置正文initEditor(edit_article.content);
    $.ajax({
       type:'get',
       url:'article/getDetails?id='+currentArticle.id,
       //成功后回调方法 展示内容
       success:function(res){
          if(res.code==0){
            let article=res.data;  
            // //设置帖子id
            jQuery('#edit_article_id').val(article.id);
            //设置板块名称
            jQuery('#edit_article_board_name').html(article.board.name);
            //设置帖子标题
            jQuery('#edit_article_title').val(article.title);
            initEditorWithContent(article.content);
          }else{
            //提示信息
            jQuery.toast({
                heading:'警告',
                text: res.message,
                icon:'warning'
              })
          }
       },
       error:function(){
        //提示信息
        jQuery.toast({
                heading:'错误',
                text: '访问错误 请联系管理员解决',
                icon:'error'
              })
       }
    });
    
    // ========================== 初始化编辑器 ========================== 
    var editor;
    
    function initEditorWithContent(md) {
      console.log('编辑区内容：' + md);
      
      // 使用自定义编辑器初始化函数
      editor = window.initEditor("edit_article_content_area", {
        width: "100%",
        height: "100%",
        markdown: md,
        placeholder: "开始创作...",
        path: "./dist/editor.md/lib/",
        imageUploadURL: "/upload/image",
        onloadFun: showLoading,
        onloadedFun: hideLoading,
        imageUploadCallback: function(data) {
          // 成功提示
          $.toast({
            heading: '成功',
            text: '图片上传成功',
            icon: 'success',
            position: 'top-right'
          });
        }
      });
    }

    // ========================== 处理提交修改事件 ========================== 
    $('#edit_article_submit').click(function () {
        // ID
        let articleIdEl = $('#edit_article_id');
        if(!articleIdEl.val()){
           // 提示
           $.toast({
              heading: '提示',
              text: '帖子状态异常',
              icon: 'warning'
          });
        }
        let articleTitleEl = $('#edit_article_title');
        if (!articleTitleEl.val()) {
          articleTitleEl.focus();
          // 提示
          $.toast({
              heading: '提示',
              text: '请输入帖子标题',
              icon: 'warning'
          });
          return;
        }
        // content
        let articleContentEl = $('#edit_article_content');
        // 非空校验
        if (!articleContentEl.val()) {
          // 提示
          $.toast({
              heading: '提示',
              text: '请输入帖子内容',
              icon: 'warning'
          });
          return;
      }

        // 构造修改对象
        let postData={
            id:articleIdEl.val(),
            title:articleTitleEl.val(),
            content:articleContentEl.val()
        };
        // 发送修改请求, 成功后跳转至首页changeNavActive($('#nav_board_index'));
        $.ajax({
              type:'post',
              url:'article/modify',
              contentType:'application/x-www-form-urlencoded',
              data:postData,
              success:function(res){
                if(res.code==0){
                   //提示信息
                   jQuery.toast({
                  heading:'成功',
                  text: '修改成功',
                  icon:'success'
                  })
                  //修改成功 跳转页面
                  changeNavActive($('#nav_board_index'));
                }else{
                  //提示信息
                  jQuery.toast({
                  heading:'警告',
                  text: res.message,
                  icon:'warning'
                  })
                }

              },
              error:function(){
                  //提示信息
                jQuery.toast({
                heading:'错误',
                text: '访问错误 请联系管理员解决',
                icon:'error'
              })
              }
        });
    });
  });
</script>